<template>

    <div style="max-width: 960px;margin: 0 auto;">
        <el-form ref="loginForm"
                 :model="user"
                 :rules="rules"
                 class="login-box"
                 v-loading="loading"
                 element-loading-text="登录ing..."
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-col :span="12">
                <h4 style="margin-top: 0px;">企业标准信息公共服务平台 ({{this.area}})</h4>
            </el-col>
            <el-col :span="12">
                <el-form-item class="grid-content bg-purple" label-width="80px">
                    <el-link type="primary" style="font-size: 12px;margin-top: 0px;font-size: 12px"><a href="/"
                                                                                                       style="color: #409EFF;">帮助中心</a>
                    </el-link>
                    <el-divider direction="vertical"></el-divider>
                    <el-link type="primary" style="font-size: 12px;margin-top: 0px;font-size: 12px"><a href="/"
                                                                                                       style="color: #409EFF;">返回首页</a>
                    </el-link>
                </el-form-item>
            </el-col>
            <h3 class="login-title">用户登录</h3>
            <div label-width="80px">
                <el-form-item label="账号" prop="username" label-width="80px">
                    <el-input type="text" placeholder="请输入账号" v-model="user.username"/>
                </el-form-item>
                <el-form-item label="密码" prop="password" label-width="80px">
                    <el-input type="password" placeholder="请输入密码" v-model="user.password"/>
                </el-form-item>
                <el-form-item label="验证码" prop="authCode" label-width="80px">
                    <el-col :span="12">
                        <el-input style="width: 100%" type="authCode" placeholder="请输入验证码" v-model="user.authCode"/>
                    </el-col>
                    <el-col :span="6">
                        <img style="margin-top: 3px;margin-left: 5px" class="verify" @click.prevent="refresh()"
                             ref="codeImg"/></el-col>
                </el-form-item>
            </div>
            <el-form-item label-width="20px">
                <el-button style="margin-top: 20px;width: 400px" type="primary" v-on:click="onSubmit('loginForm')">登录
                </el-button>
            </el-form-item>
            <el-form-item class="grid-content bg-purple" style="text-align: left" label-width="50px">
                <el-link type="primary" style="font-size: 12px;" v-on:click="getUsername()">找回用户名?</el-link>&nbsp;&nbsp;
                <el-divider direction="vertical"/>
                <el-link type="primary" style="font-size: 12px;" v-on:click="getPassword">找回密码?</el-link>
                <el-divider direction="vertical"/>
                <el-link type="primary" style="font-size: 12px;" v-on:click="registerAuth">新用户注册</el-link>&nbsp;&nbsp;
                <el-divider direction="vertical"/>
                <el-link type="primary" style="font-size: 12px;" v-on:click="updateMobile">修改手机号</el-link>&nbsp;&nbsp;
            </el-form-item>
        </el-form>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <span>请按提示输入信息</span>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>

<script>
    import Header from "../../../components/Header";
    import {getUserAuthorization, userLogin} from '../../../api/userMG'

    export default {
        components: {Header},
        name: "Content",
        data() {
            return {
                loading: false,
                area: window.localStorage.AREA,
                user: {},

                // 表单验证，需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不可为空', trigger: 'blur'}
                    ],
                    authCode: [
                        {required: true, message: '验证码不可为空', trigger: 'blur'}
                    ]
                },

                // 对话框显示和隐藏
                dialogVisible: false
            }
        },
        methods: {
            getPassword() {
                window.localStorage.opCode = '0';
                this.$router.push({name: "Auth", params: {opCode: "0"}})
            },
            registerAuth() {
                window.localStorage.opCode = '1';
                this.$router.push({name: "Auth", params: {opCode: "1"}})
            },
            updateMobile() {
                window.localStorage.opCode = '2';
                this.$router.push({name: "Auth", params: {opCode: "2"}})
            },
            getUsername() {
                this.$router.push({name: "GetUsername"})
            },
            // 刷新验证码
            refresh() {
                this.$axios.get('/api/v1/user/kaptcha', {responseType: 'blob'}).then(res => {
                    this.$refs.codeImg.src = window.URL.createObjectURL(res.data);
                    console.log("res.headers",res.headers);
                    this.user.authCodeKey = res.headers['auth-code'];
                    res.onload = function () {
                        alert(res.getAllResponseHeaders());
                        console.log(res)
                    }
                    // this.from.authCodeKey = res.headers['authCodeKey'];
                });
            },
            onSubmit() {
                const _this = this;
                console.log("this.user=>", this.user);
                userLogin(_this.user).then(res => {
                        _this.loading = true;
                        //后台定义 返回数据 ok == 登录成功
                        if (res.code === 200) {
                            console.log("res===>",res);
                            window.localStorage.JWT_TOKEN = res.data.Authorization;
                            console.log("storage.JWT_TOKEN", window.localStorage.JWT_TOKEN);
                            _this.loading = false;
                            getUserAuthorization().then(res=>{
                                if (res.code === 200) {
                                    window.localStorage.role = 'user';// 设置角色
                                    _this.$router.push({name: "AD"});
                                }
                            });
                        } else {
                            _this.$message.error('登录失败！');
                            _this.loading = false;
                        }
                    }
                );
            }
        },
        created() {
            //获取验证码图片
            this.$axios.get('/api/v1/user/kaptcha', {responseType: 'blob'}).then(res => {
                console.log("========赋值验证码===========");
                this.user.authCodeKey = res.headers['auth-code'];
                this.$refs.codeImg.src = window.URL.createObjectURL(res.data);
            });
            console.log("====JWT_TOKEN清除前===");
            console.log(window.localStorage.JWT_TOKEN);
            window.localStorage.clear();
            console.log("====JWT_TOKEN清除后===");
            console.log(window.localStorage.JWT_TOKEN);

        }
    }
</script>


<style scoped>
    .login-box {
        border: 1px solid #DCDFE6;
        width: 420px;
        height: 420px;
        margin-top: 50px;
        margin-left: 200px;
        padding: 35px 35px 15px 35px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        box-shadow: 0 0 25px #909399;
    }

    .login-title {
        text-align: center;
        color: #303133;
    }

    a {
        text-decoration: none;
        font-size: 13px;
        width: auto;
    }
</style>
